<template>
  <div>
    <ul>
      <li v-for="message in messageList" :key="message.id">
        <!-- 传参的第一种写法：to字符串写法 -->
        <!-- <router-link :to="`/home/message/detail?id=${message.id}&title=${message.title}&content=${message.content}`"> -->
        
        <!-- 传参的第二种写法：to对象写法 -->
        <router-link 
          :to="{
            name:'xiang',
            query:{
              id:message.id,
              title:message.title,
              content:message.content
            }
          }" 
        >
          {{message.title}}
        </router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name:'Message',
    data() {
      return {
        messageList:[
          {id:'asdsa01',title:'中国移动话费通知！',content:'您的余额不足，请及时缴费'},
          {id:'asdsa02',title:'恭喜，您称为幸运用户！',content:'点击下方链接领取奖励'},
          {id:'asdsa03',title:'来自缅北的问候！',content:'诚邀您贡献您各种器官'}
        ]
      }
    },
  }
</script>